<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 主体 -->
    <main>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide swiper-bg1"></div>
                <div class="swiper-slide swiper-bg2"></div>
                <div class="swiper-slide swiper-bg3"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <!-- 用户名 -->
        <div class="user borbox bfff">
            <div class="user-head df">
                <img src="../../assets/imgs/dog.jpg" alt="" id="headUser">
                <p class="font18 user-id" id="userId"></p>
                <span id="goPage" class="iconfont icon-rightarrow"></span>
            </div>
            <p class="a8a font14 autograph" id="sign"></p>
            <img class="abs" src="../../assets/imgs/vip.png" alt="">
        </div>
        <!-- 打卡 -->
        <div class="clock borbox pad bfff df">
            <div class="clock-left df font16 c10">
                <img src="../../assets/imgs/打卡.png" alt="">
                累计打卡
                <span class="f42" id="clockDay"></span>
                天
            </div>
            <div id="todayClock" class="clock-right tcenter cfff">
            </div>
        </div>
        <!-- 个人动态 -->
        <div class="dynamic borbox pad bfff df" id="goDynamic">
            <div class="dynamic-left df font16 c10">
                <img src="../../assets/imgs/动态.png" alt="">
                个人动态
            </div>
            <div class="dynamic-right tcenter a8a df">
                10条
                <span class="iconfont icon-rightarrow"></span>
            </div>
        </div>
        <!-- 运动数据 -->
        <div class="df motion-data bfff pad">
            <div class="motion borbox df" id="goSports">
                <div class="motion-left df font16 c10 flex">
                    <img src="../../assets/imgs/折线图.png" alt="">
                    运动数据
                </div>
                <div class="motion-right tcenter a8a df">
                    <span class="iconfont icon-rightarrow"></span>
                </div>
            </div>
            <!-- 运动数据内容 -->
            <div class="motion-bottom bfff df">
                <div class="data-left">
                    <span class="font14 a8a">
                        总运动
                    </span>
                    <div>
                        <span id="sporTime" class="f42"></span>
                        分钟
                    </div>
                </div>
                <div class="data-right">
                    <span class="font14 a8a">
                        本周消耗
                    </span>
                    <div>
                        <span class="f42" id="sporCalorie"></span>
                        千卡
                    </div>
                </div>
            </div>
        </div>
        <!-- 徽章 -->
        <!-- 运动数据 -->
        <div class="df badge-data bfff pad">
            <div class="badge borbox df" id="goBadge">
                <div class="badge-left df font16 c10 flex">
                    <img src="../../assets/imgs/认证,徽章,表扬.png" alt="">
                    我的运动徽章
                    <i class="abs cfff font12">M</i>
                </div>
                <div class="badge-right tcenter a8a df">
                    <span class="iconfont icon-rightarrow"></span>
                </div>
            </div>
            <div class="badge-bottom df">
                <img src="../../assets/imgs/mybadge01.jpg" alt="">
                <img src="../../assets/imgs/mybadge02.jpg" alt="">
                <img src="../../assets/imgs/mybadge03.jpg" alt="">
            </div>
        </div>
    </main>
</body>

</html>